
<template>
  <div class="ib-tree">
    <ib-tree-node v-if="tree"
    v-for="node in tree"
    :key="node.id"
    :node="node"
    >
    </ib-tree-node>
  </div>
</template>
<script>
import Vue from 'vue'
import IbTreeNode from './IbTreeNode.vue'
import toTree from './util.js'
export default {
  name: "MutiforkTree",
  data () {
    return {
      node: null,
      tree: [],
      
    }
  },
  components: {
    IbTreeNode
  },
  props:{
    data:{
      type:Array
    }
  },
  methods: {
    isChild(node, id){
      if(node.id==id){
        return true
      }else if(node.children.length > 0){
        node.children.forEach(element => {
          this.isChild(element, id)
        });
      }
      return false
    }
  },
  created(){
    this.isTree = true;
    this.tree = toTree(this.data)
    this.$on('tree-node-drag-start', (event, node) => {
      this.node = node

      // node.$parent.node.children.splice(node.index,node.index+1)
      //  this.$emit('node-drag-start', data)
    })
    this.$on('tree-node-drag-over', (event, node) => {
      //  this.$emit('node-drag-over', data)
    })
    this.$on('tree-node-drag-end', (event, node) => {
      let id = node.node.id
      let dragNode = this.node.node
      if(!this.isChild(dragNode, id)){
        this.node.node.pId = node.node.id
        this.node.$parent.node.children.splice(this.node.index,1)
        node.node.children.push(this.node.node)
        this.$emit('node-drag-end', node)
      }
    })
  },
  mounted(){
  },
  computed: {
    isEmpty() {
    }
  },
  watch: {
  }
}
</script>
<style lang="stylus">
  .ib-tree
    color #fff
    width 1500px
    text-align center
    white-space nowrap
    overflow auto
</style>